import React from 'react'
import { withRouter } from 'react-router'
import { Select, Input } from 'antd'
import TextArea from 'antd/lib/input/TextArea'
import { BaseListPage, IBaseListPageProps, columnRenders, UdModal, UdModalForm, validators } from '../../../index'

class Demo extends BaseListPage {
  constructor(props: IBaseListPageProps) {
    super(props)
    this.state = {
      title: '支付单查询',
      queryApi: 'http://10.1.100.78:8011/',
      conditions: [
        { id: 'platformPayNo', label: '平台支付单号' },
        {
          label: '状态', id: 'payStatus',
          render: <Select>
            <Select.Option value="success">成功</Select.Option>
            <Select.Option value="failure">失败</Select.Option>
            <Select.Option value="closed">超时关闭</Select.Option>
            <Select.Option value="paying">支付中</Select.Option>
            <Select.Option value="unpaid">待支付</Select.Option>
          </Select>
        },
        { id: 'requestSource', label: '来源' },
        { id: 'channelTypeLabel', label: '支付方式' },
        { id: 'channelThirdLabel', label: '支付渠道' },
      ],
      rowKey: 'id',
      columns: [
        { title: '平台支付单号', dataIndex: 'platformPayNo', minWidth: '150px', },
        { title: '商户支付单号', dataIndex: 'merchantPayNo', minWidth: '150px', },
        { title: '第三方支付单号', dataIndex: 'thirdPayNo', minWidth: '150px', },
        {
          title: '支付金额', dataIndex: 'totalAmount', minWidth: '100px',
          render: (text: any, record: any, index: number) => {
            return <div>{(text / 100).toFixed(2)}</div>
          }
        },
        { title: '状态', dataIndex: 'payStatusLabel', minWidth: '80px' },
        {
          title: '来源', dataIndex: 'requestSource', minWidth: '80px',
          render: (text: any, record: any, index: number) => {
            return <div>{text}</div>
          }
        },
        { title: '支付方式', dataIndex: 'channelTypeLabel', minWidth: '80px' },
        { title: '支付渠道', dataIndex: 'channelThirdLabel', minWidth: '100px' },
        { title: '订单创建时间', dataIndex: 'createTime', minWidth: '110px' },
        {
          title: '支付成功时间', dataIndex: 'finishTime', minWidth: '110px',
        },
        {
          title: '操作', dataIndex: 'operate', minWidth: '100px',
          render: columnRenders.operate([
            {
              title: '查询支付状态',
              show: (text: any, model: any, index: number) => model.payStatus != 'success',
              action: (text, model, index) => {
              }
            },
            {
              title: '退款',
              show: (text: any, model: any, index: number) => model.allowRefund == 1,
              action: (text: any, row: any) => this.edit(row)
            },
            {
              title: '同步调用方', show: (text: any, model: any, index: number) => model.payStatus == 'success',
              action: (text, model, index) => {
              }
            },
          ])
        }
      ]
    }
  }

  private edit = (row: any) => {
    UdModal.open({
      title: '发起退款',
      content: <UdModalForm items={[
        { id: 'totalAmount', label: '退款金额', initialValue: (row.totalAmount / 100).toFixed(2), render: <Input disabled /> },
        {
          id: 'refundReason', label: '退款原因', rules: [
            validators.required,
            { max: 50, message: '最多50个字符' },
          ], render: <TextArea />
        },
      ]} />,
      onOk: (values) => {
      }
    })
  }
}

// 如果是通过 react-router 加载的此组件，无须用 withRouter 包一次。
export default withRouter(Demo)
